<template>
  <div>
    <!-- 遍历数据 -->
    <div class="topic" v-for="item in TopicList.data" :key="item.id">
      <img width="100%" height="210" :src="item.scene_pic_url" alt />
      <p class="p1">{{item.title}}</p>
      <p class="p2 van-ellipsis">{{item.subtitle}}</p>
      <p class="p3">￥ {{item.price_info}} 元起</p>
    </div>
<!-- 上下页 -->
  <van-pagination class="page" @input="fun(currentPage,TopicList.pageSize)" v-model="currentPage" :page-count="TopicList.totalPages"  mode="simple" />


  </div>
</template>

<script>
import { GetTopicList } from "@/request/api.js";
export default {
  data() {
    return {
      TopicList: [],
      currentPage: 1,
      totalPages:"",
      a:''
    };
  },
  methods: {
    fun(currentPage,pageSize){
      this.a=pageSize
      // console.log(this.a);
      GetTopicList({page:this.currentPage,size:this.a}).then(res => {
      this.TopicList = res.data;
    });
    }
  },
  components: {},
  created() {
    GetTopicList({page:this.currentPage,size:this.a}).then(res => {
      this.TopicList = res.data;
      // console.log(this.TopicList);
    });
  }
};
</script>

<style lang='less' scoped >
.topic{
  margin-bottom: .28rem;
  background-color: #fff;
}
p {
  text-align: center;
  height: 0.2667rem;
  padding: 0.0667rem 0;
}
.p1 {
  padding-top: 0.1333rem;
  font-size: .1667rem;
}
.p3{
color: rgb(159, 67, 67);
}
// 把页数隐藏
.van-pagination__page-desc{
  display: none;
}
// 上下页的高度
.page{
    height:1.7333rem;
}
</style>
